<!--  @author:ymy  -->
<template>
  <div class="classify" @scroll="scrollEvent">
    <van-search v-model="value" @search="filterSearch('SPAN')" placeholder="绘画教程" />
    <div class="filter" @click="filterSearch">
      <div class="filter-box">
        <h3>主题</h3>
        <div class="item-list" @click="selectTheme">
          <span :class="{ active: theme.length == 0 }">全部</span>
          <span v-for="item in course_subjects" :key="item.id" :class="{ active: theme.indexOf(item.id) !== -1 }" :themeId="item.id">{{ item.name }}</span>
        </div>
      </div>
      <div class="filter-box-auto" v-show="showmore">
        <h3>领域</h3>
        <div class="item-list" @click="selectDomain">
          <span :class="{ active: domain === null }">全部</span>
          <span v-for="item in course_fields" :key="item.id" :class="{ active: domain == item.id }" :domainId="item.id">{{ item.name }}</span>
        </div>
      </div>
      <div class="filter-box-auto" v-show="showmore">
        <h3>工具</h3>
        <div class="item-list" @click="selectTools">
          <span :class="{ active: tools.length == 0 }">全部</span>
          <span v-for="item in course_tools" :key="item.id" :class="{ active: tools.indexOf(item.id) !== -1 }" :toolsId="item.id">
            {{ item.name }}
          </span>
        </div>
      </div>
      <div class="filter-box-sym" v-show="showmore">
        <h3>难度</h3>
        <div class="item-list" @click="selectDifficulty">
          <span :class="{ active: difficulty == null }">全部</span>
          <span v-for="item in level" :key="item.value" :class="{ active: difficulty == item.value }" :levelVal="item.value">
            {{ item.level_name }}
          </span>
        </div>
      </div>
      <div class="filter-box-sym">
        <h3>排序</h3>
        <div class="item-list" @click="selectSort">
          <span :class="{ active: sort == 2 }">综合</span>
          <span :class="{ active: sort == 1 }">最新</span>
          <span :class="{ active: sort == 3 }">最热</span>
        </div>
        <div class="item-more" @click="changeShowmore"><van-icon name="arrow-down" />更多筛选</div>
      </div>
    </div>
    <div class="loading" v-show="searchData.length == 0">没搜到数据....</div>
    <div class="content-items">
      <div class="content-item" v-for="item in searchData" :key="item.id">
        <div class="item-img">
          <img :src="'https://ss.lanqb.com/' + item.posters.app" alt="" />
        </div>
        <div class="item-right">
          <div class="item-text">
            <h3>{{ item.title }}</h3>
            <div class="item-userinfo">
              <div class="user">
                <img :src="'https://ss.lanqb.com/' + item.profile.avatar" alt="" />
                <p>{{ item.profile.nickname }}</p>
              </div>
              <p>共{{ item.preview_setting.lessons_count }}节</p>
            </div>
          </div>
          <div class="item-text1">
            <span>{{ item.study_num }}人在学</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Classify',
  data() {
    return {
      value: '',
      showmore: false,
      theme: [],
      domain: null,
      tools: [],
      difficulty: null,
      sort: 2,
      level: [],
      course_fields: [],
      course_subjects: [],
      course_tools: [],
      domainId: null,
      searchData: [],
      curPage: 1
    };
  },
  computed: {
    reqUrl() {
      // https://m.lanqb.com/api/course/video?type=3&course_fields_ids=7&level=1&page=1
      let url = `?type=${this.sort}&`;
      if (this.theme.length != 0) {
        let themeString1 = this.theme.join(',');
        let themeString2 = 'course_subjects_ids' + '=' + themeString1 + '&';
        url = url + themeString2;
      }
      if (this.tools.length != 0) {
        let themeString1 = this.tools.join(',');
        let themeString2 = 'course_tools_ids' + '=' + themeString1 + '&';
        url = url + themeString2;
      }
      if (this.domain != null) {
        let domainString = 'course_fields_ids' + '=' + this.domainId + '&';
        url = url + domainString;
      }
      if (this.difficulty != null) {
        let difString = 'level' + '=' + this.difficulty + '&';
        url = url + difString;
      }
      if (this.value != '') {
        let titleString = 'title' + '=' + this.value + '&';
        url = url + titleString;
      }
      return url;
    }
  },

  methods: {
    scrollEvent(e) {
      const st = e.target.scrollTop;
      const totalHeight = e.target.scrollHeight;
      const clientHeight = e.target.clientHeight;
      if (st + clientHeight >= totalHeight) {
        this.curPage++;
        this.loadMoreGet(`/lqb/api/course/video${this.reqUrl}page=${this.curPage}`).then(({ data }) => {
          this.searchData = this.searchData.concat(data);
        });
      }
    },
    async loadMoreGet(url) {
      const response = await this.axiosRq(url, 'GET');
      return response;
    },
    changeShowmore() {
      this.showmore = !this.showmore;
    },
    selectTheme(e) {
      let nodename = e.target.nodeName;
      if (nodename === 'SPAN') {
        const id = e.target.getAttribute('themeId');
        let index = this.theme.indexOf(id * 1);
        if (index === -1) {
          this.theme.push(id * 1);
        } else {
          this.theme.splice(index, 1);
        }
      }
    },
    selectDomain(e) {
      this.theme = [];
      this.tools = [];
      let nodename = e.target.nodeName;
      if (nodename === 'SPAN') {
        this.domain = e.target.getAttribute('domainId');
      }
      this.domainId = e.target.getAttribute('domainId');
      if (this.domainId === null) {
        this.loadMoreGet('/lqb/api/course-group-list').then(({ level, course_fields, course_subjects, course_tools }) => {
          this.level = level;
          this.course_fields = course_fields;
          this.course_subjects = course_subjects;
          this.course_tools = course_tools;
        });
      } else {
        this.loadMoreGet(`/lqb/api/course-fields-show/${this.domainId}?not_group=1`).then(({ course_category_pertains: { subjects, tools } }) => {
          this.course_subjects = subjects;
          this.course_tools = tools;
        });
      }
    },
    selectTools(e) {
      let nodename = e.target.nodeName;
      if (nodename === 'SPAN') {
        let id = e.target.getAttribute('toolsId') * 1;
        let index = this.tools.indexOf(id);
        if (index === -1) {
          this.tools.push(id);
        } else {
          this.tools.splice(index, 1);
        }
      }
    },
    selectDifficulty(e) {
      let nodename = e.target.nodeName;
      if (nodename === 'SPAN') {
        this.difficulty = null;
        this.difficulty = e.target.getAttribute('levelVal');
      }
    },
    selectSort(e) {
      let nodename = e.target.innerText;
      if (nodename === '综合') {
        this.sort = 2;
      } else if (nodename === '最新') {
        this.sort = 1;
      } else {
        this.sort = 3;
      }
    },
    filterSearch(e) {
      if (e === 'SPAN') {
        this.loadMoreGet(`/lqb/api/course/video${this.reqUrl}page=1`).then(({ data }) => {
          this.searchData = [];
          this.searchData = data;
        });
      } else if (e.target.nodeName === 'SPAN') {
        this.loadMoreGet(`/lqb/api/course/video${this.reqUrl}page=1`).then(({ data }) => {
          this.searchData = [];
          this.searchData = data;
        });
      }
    }
  },
  created() {
    this.loadMoreGet('/lqb/api/course-group-list').then(({ level, course_fields, course_subjects, course_tools }) => {
      this.level = level;
      this.course_fields = course_fields;
      this.course_subjects = course_subjects;
      this.course_tools = course_tools;
    });
    this.loadMoreGet(`/lqb/api/course/video${this.reqUrl}page=1`).then(({ data }) => {
      this.searchData = data;
    });
  }
};
</script>

<style lang="less" scoped>
html {
  overflow: hidden;
}
.classify {
  height: 5.09rem;
  // margin-bottom: 0.6rem;
  padding: 0 0.16rem;
  overflow: auto;
  > .filter {
    > .filter-box {
      display: flex;
      vertical-align: top;
      border-bottom: 1px solid #f1f1f1;
      padding: 0.04rem 0;
      margin-bottom: 0.08rem;
      h3 {
        display: inline-block;
        font-size: 0.14rem;
        margin-right: 0.09rem;
        margin-bottom: 0.08rem;
        flex-shrink: 0;
      }
      > .item-list {
        display: flex;
        flex-wrap: wrap;
        span {
          display: inline-block;
          height: 0.19rem;
          line-height: 0.19rem;
          font-size: 14px;
          margin: 0 0.07rem 0.08rem 0.07rem;
        }
      }
    }
    > .filter-box-auto {
      display: flex;
      margin-top: 0.04rem;
      height: 0.27rem;
      h3 {
        display: inline-block;
        font-size: 0.14rem;
        margin-right: 0.09rem;
        margin-bottom: 0.08rem;
        flex-shrink: 0;
      }
      > .item-list {
        display: flex;
        flex-wrap: nowrap;
        overflow: auto;
        text-align: center;
        height: 0.27rem;
        line-height: 0.27rem;
        span {
          flex-shrink: 0;
          display: inline-block;
          height: 0.19rem;
          line-height: 0.19rem;
          font-size: 14px;
          margin: 0 0.07rem 0.08rem 0.07rem;
        }
      }
    }
    > .filter-box-sym {
      display: flex;
      margin-top: 0.04rem;
      height: 0.27rem;
      position: relative;
      h3 {
        display: inline-block;
        font-size: 0.14rem;
        margin-right: 0.09rem;
        margin-bottom: 0.08rem;
        flex-shrink: 0;
      }
      > .item-list {
        display: flex;
        flex-wrap: nowrap;
        overflow: auto;
        text-align: center;
        height: 0.27rem;
        line-height: 0.27rem;
        span {
          flex-shrink: 0;
          display: inline-block;
          height: 0.19rem;
          line-height: 0.19rem;
          font-size: 14px;
          margin: 0 0.07rem 0.08rem 0.07rem;
        }
      }
      > .item-more {
        position: absolute;
        top: 0;
        right: 0;
        font-size: 0.14rem;
        color: #1c9fea;
      }
    }
  }
  .active {
    color: #1c9fea;
  }
  > .content-items {
    > .content-item {
      width: 3.43rem;
      height: 1.125rem;
      display: flex;
      justify-content: space-between;
      margin: 0.16rem auto 0;
      > .item-img {
        img {
          width: 1.5rem;
          height: 1.125rem;
        }
      }
      > .item-right {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin-left: 0.12rem;
        > .item-text {
          h3 {
            font-size: 0.14rem;
            font-weight: normal;
          }
          > .item-userinfo {
            margin-top: 0.08rem;
            display: flex;
            height: 0.18rem;
            line-height: 0.18rem;
            justify-content: space-between;
            font-size: 0.13rem;
            vertical-align: middle;
            > .user {
              img {
                width: 0.18rem;
                height: 0.18rem;
                border-radius: 50%;
                vertical-align: middle;
              }
              p {
                display: inline-block;
                height: 18px;
                line-height: 0.18rem;
                font-size: 0.13rem;
              }
            }
          }
        }
        > .item-text1 {
          span {
            font-size: 0.13rem;
            color: #8c8c8c;
          }
        }
      }
    }
  }
  > .loading {
    text-align: center;
    margin-top: 0.5rem;
  }
}
</style>
